<template>
  <div class="main">
    <pageHeader :active="5" :bgColor="'#292c4d'"></pageHeader>
    <div class="content">
      <div class="flex data-amount">
        <div class="data-num">
          <div class="title">近7天数据调用量</div>
          <div class="num-box">
            <span class="number">0</span>
            <!-- <span class="number">2</span>
						<span class="number">6</span>
						<span class="number">8</span> -->
            <!-- <span class="f36 ml10 mr10">.</span> -->
            <!-- <span class="number">5</span>
						<span class="number">2</span> -->
          </div>
        </div>
        <div class="num-chart" id="number"></div>
      </div>
      <div class="gauge-box">
        <div class="grow">
          <div class="title">数据服务主题统计</div>
          <div class="flex">
            <div id="source" class="use-count"></div>
            <div>
              <div class="flex a-center mt70">
                <span class="color-name bg-blue"></span>
                <span>门站</span>
              </div>
              <div class="flex a-center mt10">
                <span class="color-name bg-green"></span>
                <span>客服</span>
              </div>
              <div class="flex a-center mt10">
                <span class="color-name bg-yellow"></span>
                <span>工单</span>
              </div>
              <div class="flex a-center mt10">
                <span class="color-name bg-red"></span>
                <span>工程</span>
              </div>
              <div class="flex a-center mt10">
                <span class="color-name bg-blue2"></span>
                <span>交付</span>
              </div>
            </div>
          </div>
        </div>
        <div class="grow">
          <div class="title">数据目录主题统计</div>
          <div class="flex">
            <div id="use" class="use-count"></div>
            <div>
              <div class="flex a-center mt70">
                <span class="color-name bg-blue"></span>
                <span>设备</span>
              </div>
              <div class="flex a-center mt10">
                <span class="color-name bg-green"></span>
                <span>客户</span>
              </div>
              <div class="flex a-center mt10">
                <span class="color-name bg-yellow"></span>
                <span>工程</span>
              </div>
              <div class="flex a-center mt10">
                <span class="color-name bg-red"></span>
                <span>线路</span>
              </div>
              <!--              <div class="flex a-center mt10">
                <span class="color-name bg-blue2"></span>
                <span>项目</span>
              </div> -->
            </div>
          </div>
        </div>
      </div>
      <!-- <div class="visit-box h300">
        <div class="title mb10">近半年访问量</div>
        <div class="visit-chart" id="visit"></div>
      </div> -->
    </div>
    <!-- <pageFooter></pageFooter> -->
  </div>
</template>

<script>
import pageHeader from "@/components/pageHeader.vue";
import pageFooter from "@/components/pageFooter.vue";
import { getPwDataDirectory } from "@/api/dataSource"; //api接口
import { getPwDataService } from "@/api/dataService"; //api接口

export default {
  name: "UsageStatistics",
  data() {
    return {
      datas: [],
    };
  },

  components: {
    pageHeader,
    pageFooter,
  },
  mounted() {
    this.initChart();
    this.sourceChart();
    this.usePieChart();
    // this.initVisitChart()
  },
  methods: {
    initChart() {
      var today = new Date(); // 获取当前日期
      var dates = []; // 存储近7天日期
      for (var i = 7; i >= 1; i--) {
        var temp = new Date(today);
        temp.setDate(temp.getDate() - i); // 设置日期为当前日期的前i天
        dates.push(temp.toLocaleDateString()); // 将日期转化为字符串并存入数组
      }

      let myChart = this.$echarts.init(document.getElementById("number"));
      let option = {
        grid: {
          top: 20,
          left: 50,
          right: 10,
          bottom: 25,
        },
        xAxis: {
          type: "category",
          data: dates,
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [0, 0, 0, 0, 0, 0, 0],
            // data: [3836, 3840, 3844, 3820, 3835, 3860, 3817],
            type: "bar",
            showBackground: true,
            barWidth: 35, // 柱子宽度
            label: {
              show: true,
              position: "top",
            },
            backgroundStyle: {
              color: "rgba(180, 180, 180, 0.2)",
            },
          },
        ],
      };
      myChart.setOption(option);
    },
    //数据目录主题统计
    usePieChart() {
      var datas = [
        {
          value: 0,
          name: "设备",
        },
        {
          value: 0,
          name: "客户",
        },
        {
          value: 0,
          name: "工程",
        },
        {
          value: 0,
          name: "线路",
        },
      ];

      let myChart = this.$echarts.init(document.getElementById("use"));
      let option = {
        tooltip: {
          trigger: "item",
        },
        legend: {
          show: false,
          top: "5%",
          left: "center",
        },
        series: [
          {
            type: "pie",
            radius: ["40%", "70%"],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: "#fff",
              borderWidth: 2,
            },
            label: {
              show: false,
              position: "center",
            },
            data: datas,
          },
        ],
      };

      getPwDataDirectory({}).then((response) => {
        if (response.code == 0) {
          var sb = 0;
          var kh = 0;
          var gc = 0;
          var xl = 0;
          response.data.forEach(function (element, index) {
            if (element.subject == 1) {
              sb = sb + 1;
            } else if (element.subject == 2) {
              kh = kh + 1;
            } else if (element.subject == 3) {
              gc = gc + 1;
            } else if (element.subject == 4) {
              xl = xl + 1;
            }
          });
          datas[0].value = sb;
          datas[1].value = kh;
          datas[2].value = gc;
          datas[3].value = xl;
          myChart.setOption(option);
        }
      });
    },

    //数据服务主题统计
    sourceChart() {
      var datas = [
        {
          value: 0,
          name: "门站",
        },
        {
          value: 0,
          name: "客服",
        },
        {
          value: 0,
          name: "工单",
        },
        {
          value: 0,
          name: "工程",
        },
        {
          value: 0,
          name: "交付",
        },
      ];

      let myChart = this.$echarts.init(document.getElementById("source"));
      let option = {
        tooltip: {
          trigger: "item",
        },
        legend: {
          show: false,
          top: "5%",
          left: "center",
        },
        series: [
          {
            type: "pie",
            radius: ["40%", "70%"],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: "#fff",
              borderWidth: 2,
            },
            label: {
              show: false,
              position: "center",
            },
            data: datas,
          },
        ],
      };

      getPwDataService({}).then((response) => {
        console.log(response);
        if (response.code == 0) {
          var mz = 0;
          var kh = 0;
          var gd = 0;
          var gc = 0;
          var jf = 0;
          response.data.forEach(function (element, index) {
            if (element.subject == 1) {
              mz = mz + 1;
            } else if (element.subject == 2) {
              kh = kh + 1;
            } else if (element.subject == 3) {
              gd = gd + 1;
            } else if (element.subject == 4) {
              gc = gc + 1;
            } else if (element.subject == 5) {
              jf = jf + 1;
            }
          });

          datas[0].value = mz;
          datas[1].value = kh;
          datas[2].value = gd;
          datas[3].value = gc;
          datas[4].value = jf;
          myChart.setOption(option);
        }
      });
    },

    //近半年统计量
    initVisitChart() {
      let myChart = this.$echarts.init(document.getElementById("visit"));
      let option = {
        grid: {
          top: 20,
          left: 50,
          right: 10,
          bottom: 25,
        },
        xAxis: {
          type: "category",
          data: ["Mar", "Apr", "May", "Jun", "Jul", "Aug"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [78, 132, 153, 224, 177, 203],
            type: "line",
          },
        ],
      };
      myChart.setOption(option);
    },
  },
};
</script>

<style lang="scss" scoped>
.main {
  .content {
    min-height: calc(100vh - 300px);
    width: 1200px;
    margin: 0px auto;
    padding: 80px 0;

    .data-amount {
      background: #f1f5f9;
      margin-top: 30px;
      padding: 20px;

      .data-num {
        width: 440px;
        height: 270px;
        background: url("../../assets/images/data-bg.png") 20% 100% no-repeat;
        background-size: 100% 92%;
        position: relative;

        .num-box {
          position: absolute;
          bottom: 40px;
          left: 50%;
          transform: translateX(-50%);
          white-space: nowrap;
        }
      }

      .num-chart {
        width: 700px;
        height: 270px;
      }
    }

    .gauge-box {
      padding: 15px;
      background: #f1f5f9;
      display: flex;
      margin-top: 15px;

      .use-count,
      .visit-count {
        width: 60%;
        height: 270px;
      }
    }

    .title {
      font-size: 16px;
      border-left: 4px solid #0c60f9;
      text-align: left;
      padding-left: 5px;
    }

    .number {
      display: inline-block;
      background: url("../../assets/images/number.png") no-repeat;
      background-size: 38px 55px;
      width: 36px;
      height: 52px;
      font-size: 40px;
      line-height: 52px;
      margin-right: 10px;
    }

    .color-name {
      height: 16px;
      width: 30px;
      margin-right: 10px;
      border-radius: 3px;
    }

    .bg-blue {
      background: #5470c6;
    }

    .bg-green {
      background: #91cc75;
    }

    .bg-yellow {
      background: #fac858;
    }

    .bg-red {
      background: #ee6666;
    }

    .bg-blue2 {
      background: #73c0de;
    }

    .h300 {
      height: 300px;
    }

    .visit-box {
      padding: 15px;
      background: #f1f5f9;
      margin-top: 15px;

      .visit-chart {
        width: 100%;
        height: 270px;
      }
    }
  }
}
</style>
